<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui"
    />
    <meta
      name="keywords"
      content="CSIST,成都软件技术专修学院,后台管理系统,学籍管理系统"
    />
    <meta name="description" content="成都软件技术专修学院学生学籍管理系统" />
    <meta name="author" content="Group 2, Class 1,21 SE" />
    <title>学生基础信息</title>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.min.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="../js/bootstrap-datepicker/bootstrap-datepicker3.min.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="../js/bootstrap-select/bootstrap-select.min.css"
    />
    <link rel="stylesheet" type="text/css" href="../css/custom/all_page.css" />
  </head>
  <body>
    <div id="main" class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <!-- card start -->
          <div class="card">
            <!-- card-header start -->
            <header
              class="card-header d-flex justify-content-between align-items-center"
            >
              <!-- breadcrumb navigator start -->
              <nav id="nav-title" aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li>当前位置：</li>
                  <li class="breadcrumb-item">学生信息管理</li>
                  <li class="breadcrumb-item active" aria-current="page">
                    学生基础信息
                  </li>
                </ol>
              </nav>
              <!-- breadcrumb navigator end -->
              <a
                class="btn btn-outline-primary"
                data-bs-toggle="collapse"
                href="#collapse-query-area"
                role="button"
                aria-expanded="false"
                aria-controls="collapse-query-area"
                @click="toggle"
              >
                {{unfoldOrfold}}查询栏
              </a>
            </header>
            <!-- card-header end -->
            <!-- card-body start -->
            <div class="card-body">
              <!-- query-area card collapse start -->
              <div
                class="card collapse show"
                id="collapse-query-area"
                ref="collapse"
              >
                <!-- query-area card-body start -->
                <div class="card-body py-1">
                  <span class="d-block mx-2 mb-2">专修查询条件</span>
                  <div class="row">
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="specialtyNum">
                          专修编号
                        </label>
                        <input
                          type="text"
                          id="specialtyNum"
                          class="form-control"
                          placeholder="请输入..."
                          aria-label="查询专修编号的输入栏"
                          v-model="queryGroup.specialtyNum"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="studentName">
                          学生姓名
                        </label>
                        <input
                          type="text"
                          id="studentName"
                          class="form-control"
                          placeholder="请输入..."
                          aria-label="查询学生姓名的输入栏"
                          v-model="queryGroup.studentName"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="idNum">
                          证件号码
                        </label>
                        <input
                          type="text"
                          id="idNum"
                          class="form-control"
                          placeholder="请输入..."
                          aria-label="查询身份证件号码的输入栏"
                          v-model="queryGroup.idNum"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="className">
                          专修班级
                        </label>
                        <input
                          type="text"
                          id="className"
                          class="form-control"
                          placeholder="请输入..."
                          aria-label="查询专修班级名称的输入栏"
                          v-model="queryGroup.className"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label for="studentYear" class="input-group-text">
                          学生年级
                        </label>
                        <input
                          class="form-control"
                          type="text"
                          data-provide="datepicker"
                          id="studentYear"
                          data-date-format="yyyy"
                          placeholder="请选择或输入..."
                          aria-label="查询学生年级的输入栏"
                          :value="queryGroup.studentYear"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label for="specialtyMajor" class="input-group-text">
                          专修专业
                        </label>
                        <select
                          id="specialtyMajor"
                          class="selectpicker form-control"
                          data-style="w-180"
                          data-live-search="true"
                          data-live-search-placeholder="搜索"
                          data-none-results-text="没有相匹配专业"
                          aria-label="查询专修专业的选框"
                          v-model="queryGroup.specialtyMajor"
                        >
                          <option
                            v-for="item in specialtyMajorList"
                            :key="item.smiId"
                            :value="item.smiId"
                          >
                            {{item.smiName}}
                          </option>
                        </select>
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label for="enterBatch" class="input-group-text">
                          专修季度
                        </label>
                        <select
                          id="enterBatch"
                          class="selectpicker form-control static"
                          data-style="w-180"
                          aria-label="查询专修季度/批次的选框"
                          v-model="queryGroup.enterBatch"
                        >
                          <option value="3">春季</option>
                          <option value="9">秋季</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label for="learningState" class="input-group-text">
                          学习状态
                        </label>
                        <select
                          id="learningState"
                          class="selectpicker form-control"
                          data-style="w-180"
                          aria-label="查询学生学习状态（专修）的选框"
                          v-model="queryGroup.learningState"
                        >
                          <option
                            v-for="item in learningStateList"
                            :key="item.esId"
                            :value="item.esId"
                          >
                            {{item.esName}}
                          </option>
                        </select>
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label for="teacherName" class="input-group-text">
                          班主任姓名
                        </label>
                        <select
                          id="teacherName"
                          class="selectpicker form-control"
                          data-style="w-180"
                          aria-label="查询学生专修在校状态的选框"
                          v-model="queryGroup.teacherName"
                        >
                          <option
                            v-for="item in teacherNameList"
                            :key="item.uiId"
                            :value="item.uiId"
                          >
                            {{item.uiName}}
                          </option>
                        </select>
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group-text">
                        <span class="me-3">性别</span>
                        <div class="form-check form-check-inline my-0">
                          <input
                            type="radio"
                            name="gender"
                            id="default"
                            class="form-check-input"
                            aria-label="性别查询默认选择框"
                            value="default"
                            v-model="gender"
                          />
                          <label for="default" class="form-check-label">
                            不选择
                          </label>
                        </div>
                        <div class="form-check form-check-inline my-0">
                          <input
                            type="radio"
                            name="gender"
                            id="man"
                            class="form-check-input"
                            aria-label="查询男性的选择框"
                            value="man"
                            v-model="gender"
                          />
                          <label for="man" class="form-check-label">男</label>
                        </div>
                        <div class="form-check form-check-inline my-0">
                          <input
                            type="radio"
                            name="gender"
                            id="woman"
                            class="form-check-input"
                            aria-label="查询女性的选择框"
                            value="woman"
                            v-model="gender"
                          />
                          <label for="woman" class="form-check-label">
                            女
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <span class="d-block mx-2 mb-2">学历查询条件</span>
                  <div class="row mb-2">
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="examNum">
                          学历学号
                        </label>
                        <input
                          type="text"
                          id="examNum"
                          class="form-control"
                          placeholder="请输入..."
                          aria-label="查询学生学历准考证号的输入栏"
                          v-model="queryGroup.examNum"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label for="registrationYear" class="input-group-text">
                          学历注册年份
                        </label>
                        <input
                          class="form-control"
                          type="text"
                          data-provide="datepicker"
                          id="registrationYear"
                          data-date-format="yyyy"
                          placeholder="请选择或输入..."
                          aria-label="查询学生学历注册年份的输入栏"
                          :value="queryGroup.registrationYear"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label for="graduationYear" class="input-group-text">
                          学历毕业年份
                        </label>
                        <input
                          class="form-control"
                          type="text"
                          data-provide="datepicker"
                          id="graduationYear"
                          data-date-format="yyyy"
                          placeholder="请选择或输入..."
                          aria-label="查询学生学历毕业年份的输入栏"
                          :value="queryGroup.graduationYear"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="registrationNum">
                          学历平台注册号
                        </label>
                        <input
                          type="text"
                          id="registrationNum"
                          class="form-control"
                          placeholder="请输入..."
                          aria-label="查询学生学历平台注册号的输入栏"
                          v-model="queryGroup.registrationNum"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label for="registrationBatch" class="input-group-text">
                          学历注册季度
                        </label>
                        <select
                          id="registrationBatch"
                          class="selectpicker form-control static"
                          data-style="w-180"
                          aria-label="查询学历注册季度/批次的选框"
                          v-model="queryGroup.registrationBatch"
                        >
                          <option value="3">春季</option>
                          <option value="9">秋季</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label
                          for="levelLearningState"
                          class="input-group-text"
                        >
                          学历学习状态
                        </label>
                        <select
                          id="levelLearningState"
                          class="selectpicker form-control"
                          data-style="w-180"
                          aria-label="查询学历学习状态的选框"
                          v-model="queryGroup.levelLearningState"
                        >
                          <option
                            v-for="item in learningStateList"
                            :key="item.esId"
                            :value="item.esId"
                          >
                            {{item.esName}}
                          </option>
                        </select>
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label for="teachingMethod" class="input-group-text">
                          学历类型
                        </label>
                        <select
                          id="teachingMethod"
                          class="selectpicker form-control"
                          data-style="w-180"
                          aria-label="查询教学方式的选框"
                          v-model="queryGroup.teachingMethod"
                        >
                          <option
                            v-for="item in teachingMethodList"
                            :key="item.emId"
                            :value="item.emId"
                          >
                            {{item.emName}}
                          </option>
                        </select>
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label for="educationMajor" class="input-group-text">
                          学历专业
                        </label>
                        <select
                          id="educationMajor"
                          class="selectpicker form-control"
                          data-style="w-180"
                          data-live-search="true"
                          data-live-search-placeholder="搜索"
                          data-none-results-text="没有相匹配专业"
                          aria-label="查询学历专业的选框"
                          v-model="queryGroup.educationMajor"
                        >
                          <optgroup
                            label="专科专业"
                            v-if="majorList_specialty.length > 0"
                          >
                            <option
                              v-for="item in majorList_specialty"
                              :key="item.lmiId"
                              :value="item.lmiId"
                            >
                              {{item.lmiName}}
                            </option>
                          </optgroup>
                          <optgroup
                            label="本科专业"
                            v-if="majorList_undergraduate.length > 0"
                          >
                            <option
                              v-for="item in majorList_undergraduate"
                              :key="item.lmiId"
                              :value="item.lmiId"
                            >
                              {{item.lmiName}}
                            </option>
                          </optgroup>
                        </select>
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group-text">
                        <div class="form-check form-switch">
                          <label
                            for="specializedLevel"
                            class="form-check-label"
                          >
                            专科学历
                          </label>
                          <input
                            type="checkbox"
                            role="switch"
                            name="level"
                            id="specializedLevel"
                            class="form-check-input"
                            aria-label="筛选专科学历的选框"
                            value="false"
                            v-model="queryGroup.educationalLevel"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group-text">
                        <div class="form-check form-switch">
                          <label
                            for="undergraduateLevel"
                            class="form-check-label"
                          >
                            本科学历
                          </label>
                          <input
                            type="checkbox"
                            role="switch"
                            name="level"
                            id="undergraduateLevel"
                            class="form-check-input"
                            aria-label="筛选本科学历的选框"
                            value="true"
                            v-model="queryGroup.educationalLevel"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-auto mb-2">
                      <div class="input-group-text">
                        <div class="form-check form-switch">
                          <label for="isFuzzy" class="form-check-label">
                            模糊查询
                          </label>
                          <input
                            type="checkbox"
                            role="switch"
                            id="isFuzzy"
                            class="form-check-input"
                            v-model="queryGroup.fuzzy"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <button
                        class="btn btn-primary"
                        type="button"
                        @click="query"
                      >
                        查询
                      </button>
                    </div>
                  </div>
                </div>
                <!-- query-area card-body end -->
              </div>
              <!-- query-area card collapse end -->
              <!-- function-area start -->
              <div id="function-area" class="d-flex justify-content-end mb-2">
                <button
                  id="importBtn"
                  class="btn btn-primary mx-2"
                  type="button"
                  @click="importInfo"
                >
                  导入
                </button>
                <button
                  id="exportBtn"
                  class="btn btn-primary mx-2"
                  type="button"
                  @click="exportInfo"
                >
                  导出
                </button>
                <button
                  id="addBtn"
                  class="btn btn-primary mx-2"
                  type="button"
                  data-bs-toggle="modal"
                  data-bs-target="#addModal"
                >
                  添加
                </button>
              </div>
              <!-- function-area end -->
              <!-- spinners start -->
              <div
                class="d-flex align-items-center flex-column my-3"
                v-if="!pagination"
              >
                <div class="text-primary fw-bolder">加载中...</div>
                <div class="spinner-grow text-primary m-3" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </div>
              <!-- spinners end -->
              <div v-else>
                <!-- table start -->
                <table class="table table-hover border-top border-2">
                  <thead>
                    <tr>
                      <th scope="col" class="col-1">序号</th>
                      <th scope="col" class="col-auto">专修编号</th>
                      <th scope="col" class="col-auto">学生姓名</th>
                      <th scope="col" class="col-auto">性别</th>
                      <th scope="col" class="col-2">证件号码</th>
                      <th scope="col" class="col-auto">学历层次</th>
                      <th scope="col" class="col-auto">学习状态</th>
                      <th scope="col" class="col-auto">专修专业</th>
                      <th scope="col" class="col-auto">学历组合</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item,index) in list" :key="item.bsiId">
                      <td>{{index + 1}}</td>
                      <td :title="item.bsiSid">{{item.bsiSid}}</td>
                      <td :title="item.bsiName">{{item.bsiName}}</td>
                      <td :title="item.bsiGender > 0 ? '女':'男'">
                        {{item.bsiGender > 0 ? '女' : '男'}}
                      </td>
                      <td :title="item.bsiCredential">
                        {{item.bsiCredential}}
                      </td>
                      <td :title="item.educationBackground.ebName">
                        {{item.educationBackground.ebName}}
                      </td>
                      <td :title="item.educationStatus.esName">
                        {{item.educationStatus.esName}}
                      </td>
                      <td :title="item.specificationMajorInfo.smiName">
                        {{item.specificationMajorInfo.smiName}}
                      </td>
                      <td :title="changeCode(item)">{{changeCode(item)}}</td>
                    </tr>
                  </tbody>
                </table>
                <!-- table end -->
                <!-- pagination start -->
                <nav aria-label="Page navigation example">
                  <ul class="pagination justify-content-center">
                    <li
                      class="page-item"
                      :style="pagination.hasPreviousPage?'':'pointer-events:none;'"
                    >
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        title="上一页"
                        @click="query(pagination.prePage)"
                      >
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li
                      :class="num == pagination.pageNum ? 'page-item active': 'page-item'"
                      v-for="num in pagination.navigatepageNums"
                      :key="num"
                    >
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        v-if="num == pagination.pageNum"
                      >
                        {{num}}
                      </a>
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        v-else
                        @click="query(num)"
                      >
                        {{num}}
                      </a>
                    </li>
                    <li
                      class="page-item"
                      :style="pagination.hasNextPage?'':'pointer-events:none;'"
                    >
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        title="下一页"
                        @click="query(pagination.nextPage)"
                      >
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                <!-- pagination end -->
              </div>
            </div>
            <!-- card-body end -->
          </div>
          <!-- card end -->
        </div>
      </div>
      <!-- modal start -->
      <div
        class="modal fade"
        id="addModal"
        tabindex="-1"
        data-bs-backdrop="static"
        aria-labelledby="addModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
          <div class="modal-content">
            <!-- modal-header start -->
            <div class="modal-header">
              <div class="modal-title" id="addModalLabel">新建内容</div>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <!-- modal-header end -->
            <!-- modal-body start -->
            <div class="modal-body">
              <div class="row">
                <span>提示：功能尚未完善，页面暂不显示</span>
              </div>
            </div>
            <!-- modal-body end -->
            <!-- modal-footer start -->
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" @click="add">
                确认
              </button>
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                取消
              </button>
            </div>
            <!-- modal-footer end -->
          </div>
        </div>
      </div>
      <!-- modal end -->
    </div>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/popper.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-notify.min.js"></script>
    <script
      type="text/javascript"
      src="../js/bootstrap-datepicker/bootstrap-datepicker.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../js/bootstrap-select/bootstrap-select.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../js/bootstrap-select/i18n/defaults-zh_CN.min.js"
    ></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script
      type="text/javascript"
      src="../js/custom/students_info_page.js"
    ></script>
  </body>
</html>
